<template>
  <div class="topo-toolbox">
    <el-menu
        :collapse="isCollapse"
        class="topo-toolbox"
        default-active="1"
        unique-opened
        @close="handleClose" @open="handleOpen">
      <el-submenu index="100-基本图形">
        <template slot="title">
          <q-icon name="format_shapes" size="20px" style="margin-right: 8px;"/>
          <span>交互组件</span>
        </template>
        <el-menu-item-group class="topo-toolbox">
          <DataPanel ref="dataPanel" :data="jsonBase"/>
        </el-menu-item-group>
      </el-submenu>
      <el-submenu v-if="false" index="101-统计图形">
        <template slot="title">
          <q-icon name="equalizer" size="20px" style="margin-right: 8px;"/>
          <span>统计图形</span>
        </template>
        <el-menu-item-group class="topo-toolbox">
          <DataPanel ref="dataPanel" :data="jsonChart"/>
        </el-menu-item-group>
      </el-submenu>
      <el-submenu v-for="(item,index) in toolboxData" :key="index" :index="item.id">
        <template slot="title">
          <q-icon name="burst_mode" size="20px" style="margin-right: 8px;"/>
          <span>{{ item.title }}</span>
        </template>
        <el-menu-item-group v-loading="loading" class="topo-toolbox" element-loading-text="正在初始化...">
          <DataPanel ref="dataPanel" :data="item.data"/>
        </el-menu-item-group>
      </el-submenu>
    </el-menu>
  </div>
</template>

<script>

import jsonBase from './data-toolbox/base.json';
import jsonShape from './data-toolbox/shape.json';
import jsonChart from './data-toolbox/chart.json';
import jsonTest from './data-toolbox/test.json';
import jsonIcon from './data-toolbox/icon.json';
import DataPanel from './data-panel/index';
import noImage from '../topo/images/tab/echart.svg'
import request from '@/utils/request';

export default {
  name: 'TopoToolbox',
  components: {
    DataPanel
  },
  data() {
    return {
      toolbox: [],
      items: [],
      selectedIndex: -1,
      toolboxData: [],
      loading: false,
      jsonBase: jsonBase,
      jsonChart: jsonChart,
      jsonShape: jsonShape,
      jsonTest: jsonTest,
      jsonIcon: jsonIcon,
      isCollapse: false,
      isTest: false,
      noImage: noImage
    }
  },
  mounted() {
    // var ip = window.location.host;
    // if(ip.split(":")[0]=='localhost'||ip.split(":")[0]=='192.168.0.118'){
    //   this.isTest=true;
    // }else if(this.$route.query.isTest){
    //   this.isTest=true;
    // }else{
    //    this.isTest=false;
    // }
    this.getImageType();
  },
  methods: {
    //获取图表类别
    getImageType() {
      let query = {}
      let url = "/system/dict/data/type/sys_echart_type"
      request({
        url: url,
        method: "get",
        params: query,
      }).then((res) => {
        this.toolboxData = [];
        res.data.forEach((element, index) => {
          let tyData = {
            id: 1000 + (index + 1) + "-" + element.dictValue,
            title: element.dictLabel,
            data: {}
          }
          this.toolboxData.push(tyData)
        });
      })
    },
    onDragstart(event, info) {
      var infoJson = JSON.stringify(info.info);
      event.dataTransfer.setData('my-info', infoJson);
    },
    getJson() {
      let newJson = {
        "title": "",
        "icon": "payment",
        "opened": false,
        "items": []
      };
      return newJson;
    },
    getJsonItem(option) {
      let newJson = {
        "text": "自定义",
        "icon": "format_list_bulleted",
        "info": {
          "type": "chart-wrapper",
          "componentShow": ["自定义echarts"],
          "action": [],
          "dataBind": {
            "echartOption": option,
            "echartRun": 0,
            "paramData": [{
              "key": "",
              "value": ""
            }],
            "bodyDataTable": [{
              "key": "",
              "value": ""
            }],
            "headerData": [{
              "key": "",
              "value": ""
            }]
          },
          "style": {
            "position": {
              "x": 0,
              "y": 0,
              "w": 300,
              "h": 300
            },
            "backColor": "rgba(0, 0, 0, 0)",
            "foreColor": "#000",
            "zIndex": 1,
            "transform": 0,
            "transformType": "rotate(0deg)"
          }
        }
      }
      return newJson;
    },
    getImages(label, index) {
      let baseApi = 'http://' + this.topoUtil.getServerIp() + ':10073/prod-api/';
      let query = {
        pageNum: 1,
        pageSize: 999,
        echartType: label,
        orderByColumn: 'id',
        isAsc: 'desc'
      }
      let url = "/zutai/bEchartType/list"
      request({
        url: url,
        method: "get",
        params: query,

      }).then((res) => {
        if (res.code == 200) {
          if (res.rows.length > 0) {
            let newJson = this.getJson();
            res.rows.forEach(element => {
              newJson.title = element.echartName;
              //为提高刷新图表的速度，关联字段存储图表的id
              let newJsonItem = this.getJsonItem("echartId-" + element.id);
              newJsonItem.text = element.echartName;
              if (element.echartImgae) {
                newJsonItem.icon = baseApi + element.echartImgae
              } else {
                newJsonItem.icon = this.noImage
              }
              newJson.items.push(newJsonItem)
            });
            this.toolboxData[index].data = newJson;
            // console.log(this.toolboxData);
          }
        }
        this.loading = false;
      }).catch((error) => {
        console.log(error);
        this.loading = false;
      })
    },
    handleClose(key, keyPath) {
      //this.toolboxData={};
    },
    handleOpen(key, keyPath) {
      this.loading = true;
      let strArr = key.split('-')
      if (strArr[0] > 1000) {
        this.getImages(strArr[1], strArr[0] - 1001)
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.topo-toolbox {
  // border: #ccc solid 1px;
  background-color: #f1f3f4;
  overflow-y: auto;
  overflow-x: hidden;
}
</style>
<style lang="scss" scoped>
.item-icon {
  height: 10px;

  .iconfont {
    font-size: 10px;
    margin-left: 14px;
  }
}
</style>
<style>
.topo-toolbox::-webkit-scrollbar-thumb {
  background-color: #ddd;
}

.topo-toolbox::-webkit-scrollbar {
  width: 0px;
  height: 0px;
  position: absolute;
}

.topo-toolbox::-webkit-scrollbar-track {
  background-color: #ddd;
}
</style>
